<template>
  <div class="page-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>
            <el-icon><EditPen /></el-icon>
            服务信息
          </span>
        </div>
      </template>

      <el-form :model="form" label-width="80px">
        <h3 class="section-title">居民信息</h3>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="姓名:" >
              <el-input v-model="form.residentName" disabled>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证:">
              <el-input v-model="form.idCard" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别:">
              <el-select v-model="form.gender" placeholder="请选择性别"
                         style="width: 100%;" disabled>
                <el-option label="男" value="male" />
                <el-option label="女" value="female" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生日:">
              <el-date-picker
                  v-model="form.birthday"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%;"
                  disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电话:">
              <el-input v-model="form.phone" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="地址:">
              <el-input v-model="form.address" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="标签:">
              <el-select
                  v-model="form.selectedDiseaseIds"
                  multiple
                  filterable
                  default-first-option
                  placeholder="请添加或选择标签"
                  style="width: 100%;"
                  disabled
              >
                <el-option
                    v-for="item in allDiseaseLabels"
                    :key="item.diseaseId"
                    :label="item.diseaseName"
                    :value="item.diseaseId"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider />

        <h3 class="section-title">服务信息</h3>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="具体情况:">
              <el-input
                  v-model="form.serviceItem"
                  style="width: 240px"
                  autosize
                  type="textarea"
                  placeholder="Please input"
                  disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申请日期:">
              <el-date-picker
                  v-model="form.applyDate"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%;"
                  disabled
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item style="margin-top: 30px;">
          <el-button @click="handleBack">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {ElMessage} from "element-plus";
import {EditPen, User} from "@element-plus/icons-vue";
import {queryDetail, update, updateDetail} from "../api/service.js";
import {queryAll} from "../api/diseaseTags.js";

export default{
  name: "serviceInfoDetail",
  components: {
    EditPen,
    User,
  },
  props:["id"],
  data() {
    return {
      // 表单数据
      form: {
        id: 1,
        residentName: '张飞',
        idCard: '3339871999101012124567',
        gender: 'female',
        birthday: '1999-10-06',
        phone: '13533334444',
        address: '广东佛山',
        selectedDiseaseIds: [],
        serviceItem: '量血压',
        applyDate: '2022-01-05',
        residentId: 1
      },
      // 标签的预设选项
      allDiseaseLabels: [
        { diseaseId: 1, diseaseName: '高血压' },
        { diseaseId: 2, diseaseName: '糖尿病' },
      ],
      // selectedDiseaseIds: [],
      diseaseTags:{}
    };
  },
  methods: {
    async loadData(){
      let {data:data} = await queryDetail(this.id)
      // console.log(data)
      this.form = data.data
      if (data.data && data.data.diseaseTags) {

        console.log(data.data.diseaseTags)
        let ids = data.data.diseaseTags.map(label => label.diseaseId)

        // 第三步：打印映射后，即将赋给 v-model 的 ID 数组
        console.log('提取出的ID数组:', ids);
        this.form.selectedDiseaseIds = ids
        console.log(this.form.selectedDiseaseIds)
      }
    },
    // 获取所有疾病标签
    async fetchAllDiseaseLabels() {
      let {data:data} = await queryAll()
      console.log(data)
      this.allDiseaseLabels = data.data
    },
    handleBack() {
      this.$router.push('/home/serviceFinished')
    },
  },
  mounted() {
    this.loadData()
    this.fetchAllDiseaseLabels()
  }
}
</script>

<style scoped>
.page-container {
  background-color: #f0f2f5;
  padding: 20px;
}
.card-header {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}
.card-header .el-icon {
  margin-right: 10px;
  color: #409EFF;
}
.section-title {
  font-size: 16px;
  color: #303133;
  margin-bottom: 20px;
  padding-left: 10px;
  border-left: 3px solid #409EFF;
}
.el-form-item {
  margin-bottom: 18px;
}
</style>